<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>回路</title>
    <link rel="stylesheet" type="text/css" href="/css/system.css">
    <link rel="stylesheet" href="/css/iconfont.css">
    <link rel="stylesheet" type="text/css" href="/css/map.css">
    <link rel="stylesheet" type="text/css" href="/css/sidebar.css">
    <script src="/js/Component.js"></script>
    <script src="/js/jquery.js"></script>
    <script src="/js/vue.min.js"></script>

</head>
<body>
<div class="main">
    <div class="warp">
        <div class="container">
            <div class="content_info">
					<span class="head_info">
						<input type="text" class="gs_name" value="上海正泰自动化软件系统有限公司">/
						<input type="text" class="pdf_name" value="A区1号配电房">/
						<input type="text" class="xt_name" value="A区1号配电房1号系统">
					</span><br>
                <span class="title_info">
						<input type="text" class="xt_name" value="A区1号配电房1号系统">
					</span>
                <div class="sys_info" id="app">
                    <div class="sys_msg">
                        <i class="iconfont icon-dianbiao_o"></i> {{ total_ammeter_num }}
                        <span>总电表数</span>
                    </div>
                    <div class="sys_msg">
                        <i class="iconfont icon-duankailianjie"></i> {{ switch_on_num }}
                        <span>开闸电表数</span>
                    </div>
                    <div class="sys_msg">
                        <i class="iconfont icon-connect"></i> {{ close_num }}
                        <span>闭闸电表数</span>
                    </div>
                    <div class="sys_msg">
                        <i class="iconfont icon-guzhang"></i> {{ fault_num }}
                        <span>故障电表数</span>
                    </div>
                    <div class="sys_msg unuse">
                        <i class="iconfont icon-weiqiyong"></i> {{ unuse_num }}
                        <span>未启用电表数</span>
                    </div>
                </div>
            </div>
            <div class="content_pic topnav_box">
                <canvas id="myCanvas" width="1800" height="1000"></canvas>
                <table class="jxhl disconnect" cellspacing="0">
                    <!-- 进线回路 -->
                    <thead>
                    <tr>
                        <td colspan="2"><i class="iconfont icon-duankailianjie"></i>进线回路${eqname}</td>
                    </tr>
                    </thead>
                    <tr>
                        <td>A相电流</td>
                        <td>0.0A</td>
                    </tr>
                    <tr>
                        <td>B相电流</td>
                        <td>0.0A</td>
                    </tr>
                    <tr>
                        <td>C相电流</td>
                        <td>0.0A</td>
                    </tr>
                </table>
                <table class="drbc connect" cellspacing="0">
                    <!-- 电容补偿回路 -->
                    <thead>
                    <tr>
                        <td colspan="2"><i class="iconfont icon-connect"></i>电容补偿回路</td>
                    </tr>
                    </thead>
                    <tr>
                        <td>A相电流</td>
                        <td>0.0</td>
                    </tr>
                    <tr>
                        <td>B相电流</td>
                        <td>0.0</td>
                    </tr>
                    <tr>
                        <td>C相电流</td>
                        <td>0.0A</td>
                    </tr>
                </table>
                <table class="ltkdl connect" cellspacing="0">
                    <!-- 立体库动力回路 -->
                    <thead>
                    <tr>
                        <td colspan="2"><i class="iconfont icon-connect"></i>立体库动力回路</td>
                    </tr>
                    </thead>
                    <tr>
                        <td>A相电流</td>
                        <td>0.0A</td>
                    </tr>
                    <tr>
                        <td>B相电流</td>
                        <td>0.0A</td>
                    </tr>
                    <tr>
                        <td>C相电流</td>
                        <td>0.0A</td>
                    </tr>
                </table>
                <table class="ltkzm connect" cellspacing="0">
                    <!-- 立体库照明回路 -->
                    <thead>
                    <tr>
                        <td colspan="2"><i class="iconfont icon-connect"></i>立体库照明回路</td>
                    </tr>
                    </thead>
                    <tr>
                        <td>A相电流</td>
                        <td>0.0A</td>
                    </tr>
                    <tr>
                        <td>B相电流</td>
                        <td>0.0A</td>
                    </tr>
                    <tr>
                        <td>C相电流</td>
                        <td>0.0A</td>
                    </tr>
                </table>
                <table class="pdfzm disconnect" cellspacing="0">
                    <!-- 配电房照明回路 -->
                    <thead>
                    <tr>
                        <td colspan="2"><i class="iconfont icon-connect"></i>配电房照明回路</td>
                    </tr>
                    </thead>
                    <tr>
                        <td>A相电流</td>
                        <td>0.0A</td>
                    </tr>
                    <tr>
                        <td>B相电流</td>
                        <td>0.0A</td>
                    </tr>
                    <tr>
                        <td>C相电流</td>
                        <td>0.0A</td>
                    </tr>
                </table>
                <table class="by1 connect" cellspacing="0">
                    <!-- 备用回路 -->
                    <thead>
                    <tr>
                        <td colspan="2"><i class="iconfont icon-connect"></i>备用回路</td>
                    </tr>
                    </thead>
                    <tr>
                        <td>A相电流</td>
                        <td>0.0A</td>
                    </tr>
                    <tr>
                        <td>B相电流</td>
                        <td>0.0A</td>
                    </tr>
                    <tr>
                        <td>C相电流</td>
                        <td>0.0A</td>
                    </tr>
                </table>
                <table class="yczmkte disconnect" cellspacing="0">
                    <!-- 一层照明空调二回路 -->
                    <thead>
                    <tr>
                        <td colspan="2"><i class="iconfont icon-connect"></i>一层照明空调二回路</td>
                    </tr>
                    </thead>
                    <tr>
                        <td>A相电流</td>
                        <td>0.0A</td>
                    </tr>
                    <tr>
                        <td>B相电流</td>
                        <td>0.0A</td>
                    </tr>
                    <tr>
                        <td>C相电流</td>
                        <td>$0.0A</td>
                    </tr>
                </table>
                <table class="by2 connect" cellspacing="0">
                    <!-- 备用 -->
                    <thead>
                    <tr>
                        <td colspan="2"><i class="iconfont icon-connect"></i>备用回路</td>
                    </tr>
                    </thead>
                    <tr>
                        <td>A相电流</td>
                        <td>0.0A</td>
                    </tr>
                    <tr>
                        <td>B相电流</td>
                        <td>0.0A</td>
                    </tr>
                    <tr>
                        <td>C相电流</td>
                        <td>0.0A</td>
                    </tr>
                </table>
                <table class="xfsb disconnect" cellspacing="0">
                    <!-- 消防栓泵回路 -->
                    <thead>
                    <tr>
                        <td colspan="2"><i class="iconfont icon-connect"></i>消防栓泵回路</td>
                    </tr>
                    </thead>
                    <tr>
                        <td>A相电流</td>
                        <td>0.0A</td>
                    </tr>
                    <tr>
                        <td>B相电流</td>
                        <td>0.0A</td>
                    </tr>
                    <tr>
                        <td>C相电流</td>
                        <td>0.0A</td>
                    </tr>
                </table>
                <table class="shsb disconnect" cellspacing="0">
                    <!-- 生活水泵回路 -->
                    <thead>
                    <tr>
                        <td colspan="2"><i class="iconfont icon-connect"></i>生活水泵回路</td>
                    </tr>
                    </thead>
                    <tr>
                        <td>A相电流</td>
                        <td>0.0A</td>
                    </tr>
                    <tr>
                        <td>B相电流</td>
                        <td>0.0A</td>
                    </tr>
                    <tr>
                        <td>C相电流</td>
                        <td>0.0A</td>
                    </tr>
                </table>
                <table class="by3 connect" cellspacing="0">
                    <!-- 备用 -->
                    <thead>
                    <tr>
                        <td colspan="2"><i class="iconfont icon-connect"></i>备用回路</td>
                    </tr>
                    </thead>
                    <tr>
                        <td>A相电流</td>
                        <td>0.0A</td>
                    </tr>
                    <tr>
                        <td>B相电流</td>
                        <td>0.0A</td>
                    </tr>
                    <tr>
                        <td>C相电流</td>
                        <td>0.0A</td>
                    </tr>
                </table>
                <table class="xfdle connect" cellspacing="0">
                    <!-- 消防动力二回路 -->
                    <thead>
                    <tr>
                        <td colspan="2"><i class="iconfont icon-connect"></i>电容补偿回路</td>
                    </tr>
                    </thead>
                    <tr>
                        <td>A相电流</td>
                        <td>0.0A</td>
                    </tr>
                    <tr>
                        <td>B相电流</td>
                        <td>0.0A</td>
                    </tr>
                    <tr>
                        <td>C相电流</td>
                        <td>0.0A</td>
                    </tr>
                </table>
                <table class="lqbyl connect" cellspacing="0">
                    <!-- 冷却泵预留回路 -->
                    <thead>
                    <tr>
                        <td colspan="2"><i class="iconfont icon-connect"></i>冷却泵预留回路</td>
                    </tr>
                    </thead>
                    <tr>
                        <td>A相电流</td>
                        <td>0.0A</td>
                    </tr>
                    <tr>
                        <td>B相电流</td>
                        <td>0.0A</td>
                    </tr>
                    <tr>
                        <td>C相电流</td>
                        <td>0.0A</td>
                    </tr>
                </table>
            </div>
            <!--效果html结束-->
            <div class="clear"></div>
        </div>
    </div>
</div>

</body>
<script>
    new Vue({
        el: '#app',
        data: {
            total_ammeter_num: 36,
            switch_on_num: 12,
            close_num: 24,
            fault_num: 0,
            unuse_num: 0
        }
    });
</script>
<script>

    var canvas=document.getElementById("myCanvas");
    var ctx=canvas.getContext("2d");
    ctx.scale(1,1.2);
    //绘图
    juxingtext(29,17,211,35,'#46abc0','#005765',"D1");//带文本矩形
    juxingtext(271,17,193,35,'#46abc0','#005765',"D2");
    juxingtext(485,17,340,35,'#46abc0','#005765',"D3");
    juxingtext(841,17,333,35,'#46abc0','#005765',"D4");
    mx(29,68,50,'#00e9fb');//横线(母线)
    mx(126,68,1072,'#00e9fb');//横线(母线)
    juxingsx(29,71,211,420,'#295e78');//实心矩形
    juxingsx(271,71,193,420,'#295e78');
    juxingsx(485,71,340,450,'#295e78');
    juxingsx(841,71,333,400,'#295e78');
    //进线回路
    V_line(57,71,164,'#9ae1ea');//竖线
    ISQF(57,260,8,'#ffa30c');//国际标准断路器
    V_line(57,268,80,'#9ae1ea');//竖线
    H_line(57,348,80,'#9ae1ea');//横线(母线)
    V_line(137,71,278,'#9ae1ea');//竖线
    V_line(207,71,41,'#9ae1ea');//竖线
    ground(195,348,20,'#9ae1ea');//接地
    ISQF(207,140,8,'#ffa30c');//国际标准断路器
    V_line(207,140,190,'#9ae1ea');//竖线
    //电容补偿回路
    V_line(365,71,20,'#9ae1ea');//竖线
    dis_link2(365,131,25,'#9ae1ea','#9ae1ea');//隔离刀//容抗器
    V_line(365,131,100,'#9ae1ea');//竖线
    H_line(325,231,80,'#9ae1ea');//横线(母线)
    QF(315,235,20,'#9ae1ea');
    V_line(325,231,50,'#9ae1ea');//竖线
    dis_link1(325,301,20,'#9ae1ea');
    V_line(325,301,50,'#9ae1ea');//竖线
    H_line(325,351,30,'#9ae1ea');//横线(母线)
    V_line(355,301,50,'#9ae1ea');//竖线
    dis_link1(355,301,20,'#9ae1ea');
    H_line(335,281,20,'#9ae1ea');//横线(母线)
    V_line(355,261,20,'#9ae1ea');//竖线
    H_line(355,261,30,'#9ae1ea');//横线(母线)
    V_line(385,261,50,'#9ae1ea');//竖线
    triangle4(375,325,20,'#9ae1ea');//三角形
    V_line(405,231,50,'#9ae1ea');//竖线
    ground(393,281,20,'#9ae1ea');//接地
    //电容补偿回路
    //	dis_link3(355,-175,19,30,'#9ae1ea');//隔离刀//容抗器
    //D3
    H_line(487,104,48,'#9ae1ea');//横线
    H_line(557,104,213,'#9ae1ea');//横线
    triangle3(774,104,38,'#9ae1ea');
    ISQF2(560,104,20,'#ffa30c');

    H_line(487,178,48,'#9ae1ea');//横线
    H_line(557,178,213,'#9ae1ea');//横线
    triangle3(774,178,38,'#9ae1ea');
    ISQF2(560,178,20,'#ffa30c');

    H_line(487,252,48,'#9ae1ea');//横线
    H_line(557,252,213,'#9ae1ea');//横线
    triangle3(774,252,38,'#9ae1ea');
    ISQF2(560,252,20,'#ffa30c');

    H_line(487,326,48,'#9ae1ea');//横线
    H_line(557,326,213,'#9ae1ea');//横线
    triangle3(774,326,38,'#9ae1ea');
    ISQF2(560,326,20,'#ffa30c');

    H_line(487,400,48,'#9ae1ea');//横线
    H_line(557,400,213,'#9ae1ea');//横线
    triangle3(774,400,38,'#9ae1ea');
    ISQF2(560,400,20,'#ffa30c');

    H_line(487,474,48,'#9ae1ea');//横线
    H_line(557,474,213,'#9ae1ea');//横线
    triangle3(774,474,38,'#9ae1ea');
    ISQF2(560,474,20,'#ffa30c');

    //D4
    H_line(841,95,35,'#9ae1ea');//横线
    H_line(900,95,213,'#9ae1ea');//横线
    triangle3(1118,95,38,'#9ae1ea');
    ISQF2(900,95,20,'#ffa30c');

    H_line(841,165,35,'#9ae1ea');//横线
    H_line(900,165,213,'#9ae1ea');//横线
    triangle3(1118,165,38,'#9ae1ea');
    ISQF2(900,165,20,'#ffa30c');

    H_line(841,230,35,'#9ae1ea');//横线
    H_line(900,230,213,'#9ae1ea');//横线
    triangle3(1118,230,38,'#9ae1ea');
    ISQF2(900,230,20,'#ffa30c');

    H_line(841,300,35,'#9ae1ea');//横线
    H_line(900,300,213,'#9ae1ea');//横线
    triangle3(1118,300,38,'#9ae1ea');
    ISQF2(900,300,20,'#ffa30c');

    H_line(841,370,35,'#9ae1ea');//横线

    triangle3(1118,370,38,'#9ae1ea');
    ISQF2(900,370,20,'#ffa30c');
    H_line(900,370,213,'#9ae1ea');//横线
    dis_link3(355,-175,19,30,'#9ae1ea');//隔离刀//容抗器
</script>
</html>
